<template>
	<van-tabs animated>
		<van-tab title="未使用">
			<view class="body">
				<!-- 顶部订单状态 -->
				<!-- <view class="head">
			<view v-for="item in state" :key="item.id" :data-index="item.id" @click="getId"
				:class="item.isActive?'isActive':''">{{item.name}}</view>
		</view> -->
				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
				</view>

			</view>
		</van-tab>
		<van-tab title="已使用">
			<view class="body">
				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/1.png" mode=""></image>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/1.png" mode=""></image>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/1.png" mode=""></image>
					</view>
				</view>
			</view>
		</van-tab>
		<van-tab title="已过期">
			<view class="body">
				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/ygq.png" mode=""></image>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/ygq.png" mode=""></image>
					</view>
				</view>

				<view class="head">
					<view class="head1">

					</view>
					<!-- 生鲜优惠卷券 -->
					<view class="head21">
						<text>生鲜优惠券</text>
					</view>
					<view class="head22">
						<text>￥</text>
						<text style="font-size: 30px;">50</text>
					</view>
					<view class="head3">
						<text>可跨店铺使用</text>
					</view>
					<!-- 虚线 -->
					<view class="x">
						-------------------------------------------
					</view>
					<view class="head01">
						<text>
							满200减50
							有效期：2017.5.19 ~ 2017.6.19
						</text>
					</view>
					<view class="photo">
						<image class="photo" src="/static/coupon_imgs/ygq.png" mode=""></image>
					</view>
				</view>
			</view>
		</van-tab>
	</van-tabs>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.body {
		height: 600px;
		background-color: #ebebeb;
	}

	.head {
		width: 95%;
		height: 160px;
		position: relative;
		background-color: white;
		margin-left: 5px;
		border-radius: 10px;
		top: 10px;
		margin-bottom: 8px;
	}

	.head1 {
		width: 100%;
		height: 6px;
		background-color: #999999;
		border-radius: 3px;
	}

	.head21 {
		font-size: 20px;
		font-weight: bold;
		margin: 10px 0 0 20px;
		color: #999999;
	}

	.head22 {
		position: absolute;
		top: 20px;
		left: 240px;
		color: #999999;
	}

	.head3 {
		font-size: 12px;
		position: absolute;
		top: 58px;
		left: 220px;
		color: #999999;
	}

	.x {
		position: relative;
		margin: 39px 0 5px 0;
		color: #999999;
	}

	.head01 {
		margin: 10px 0 0 20px;
		font-size: 13px;
		color: #999999;
	}

	.photo {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		top: 20px;
		left: 60px;
	}
</style>
